<template>
  <div class="condition-index-container view flex-row">
    <!-- <div
      class="m-r-15 minw300"
      style="border: 1px solid #ebeef5; padding: 10px; border-radius: 5px"
    >
      <tree
        :nodes="nodes"
        ref="treeAuth"
        @onClick="selectTree"
        :setting="setting"
        @onCreated="handleCreated"
      />
    </div> -->
    <div>
      <el-form :inline="true" :model="queryForm" @submit.native.prevent>
        <el-form-item label="开始时间">
          <el-date-picker
            format="yyyy-MM-dd"
            v-model="queryForm.startday"
            type="datetime"
            placeholder="选择开始日期时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryForm.endday"
            format="yyyy-MM-dd"
            type="datetime"
            placeholder="选择结束日期时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="用户">
          <el-select v-model="value" placeholder="请选择">
            <el-option-group
              v-for="group in options"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="fetchData">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        stripe
        style="width: 100%"
        :element-loading-text="elementLoadingText"
      >
        <el-table-column
          align="center"
          prop="username"
          label="账号"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="uid"
          label="用户Id"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="id"
          label="条件单编号"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="status"
          label="状态"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="tradition"
          label="条件"
        ></el-table-column>
        <el-table-column align="center" prop="type" label="下单类型">
          <template slot-scope="scope">
            <div class="fz-14 C_333">
              {{ scope.row.ptype == 2 ? '限价' : '市价' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="toprice"
          label="下单价格"
        ></el-table-column>
        <el-table-column align="center" prop="buy" label="买卖">
          <template slot-scope="scope">
            <div class="fz-14 C_333">
              {{ scope.row.risefall == 'rise' ? '买' : '卖' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="flat" label="开平">
          <template slot-scope="scope">
            <div class="fz-14 C_333">
              {{ scope.row.status == 'open' ? '开' : '平' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="tonum"
          label="数量"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          min-width="100"
        >
          <template slot-scope="scope">
            <div class="fz-14 C_333">
              {{
                $dayjs.unix(scope.row.createtime).format('YYYY-MM-DD HH:mm:ss')
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { taskorders, getUserlist } from '@/api/userManagement'
  import { getGrouplist } from '@/api/ad'
  import tree from 'vue-giant-tree'
  export default {
    components: { tree },
    data() {
      return {
        queryForm: {
          startday: '',
          endday: '',
          page: 1,
          uid: '',
        },
        setting: {
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: false,
          },
        },
        listLoading: false,
        nodes: [],
        list: [],
        elementLoadingText: '正在加载...',
      }
    },
    mounted() {
      this.getGroupListData()
    },
    methods: {
      selectTree() {
        let node = this.ztreeObj.getSelectedNodes()[0]
        if (node.id.indexOf('userid_') > -1) {
          this.queryForm.uid = node.id.replace('userid_', '')
          this.fetchData()
          return false
        }
      },
      getGroupListData() {
        getGrouplist({})
          .then((res) => {
            // this.nodes = res.data.map((item, index) => {
            //   let datac = {}
            //   if (index == 0) {
            //     datac.pid = 0
            //     datac.open = true
            //   }
            //   datac.id = item.id
            //   datac.name = item.gname
            //   return datac
            // })
            // this.grouplist = res.data

            this.nodes = res.data
            this.getUsers()
          })
          .catch((ret) => {
            console.log(ret)
          })
      },
      async getUsers() {
        this.grouplist.forEach(async (dc) => {
          const res = await getUserlist({ groupid: dc.id })
          const maps = res.data.map((item) => {
            item.name = item.username
            item.id = `userid_${item.id}`
            item.pid = dc.id
            item.url = ''
            return item
          })
          this.nodes.push(...maps)
        })
      },
      handleCreated: function (ztreeObj) {
        this.ztreeObj = ztreeObj
        ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
        this.ztreeObj.selectNode(this.ztreeObj.getNodes()[0], true)
        this.fetchData()
      },
      fetchData() {
        taskorders(this.queryForm)
          .then((res) => {
            res.data.map((item) => {
              item.tradition =
                item.contract +
                ':' +
                (item.risefall == 'rise' ? '购买' : '卖价') +
                (item.size == 'big' ? '>=' : '<=') +
                item.toprice
              return item
            })
            this.list = res.data
          })
          .catch((ret) => {})
      },
    },
  }
</script>
<style lang="scss" scoped>
  .condition-index {
    padding: 20px;
    ::v-deep {
      .el-form-item {
        margin-right: 16px;
      }
      .el-radio:not(:last-child) {
        margin-right: 12px;
      }
    }
  }
  .minw300 {
    min-width: 100px;
  }
</style>
